<template>
    <div class="app-container">

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>注册用户权限</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="saveOption(1)">保存</el-button>
            </div>
            <div class="text item">
                <el-select v-model="reg_group">
                    <el-option v-for="(v, i) in group_list" :key="i" :label="v.group_name" :value="v.id"></el-option>
                </el-select>
            </div>
        </el-card>

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>注册用户状态</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="saveOption(2)">保存</el-button>
            </div>
            <div class="text item">
                <el-select v-model="reg_state">
                    <el-option v-for="(v, i) in state_list" :key="i" :label="v.state_name" :value="v.id"></el-option>
                </el-select>
            </div>
        </el-card>

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>注册开关</span>
            </div>
            <div class="text item">
                <el-button>
                    <el-switch @change="saveOption(3)" v-model="reg_switch" active-color="#13ce66" inactive-color="#ff4949"
                        :active-value="1" :inactive-value="0">
                    </el-switch>
                </el-button>

            </div>
        </el-card>

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>移动端地址</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="saveOption(4)">保存</el-button>
            </div>
            <div class="text item">
                <el-input v-model="h5_url" />
            </div>
        </el-card>
    </div>
</template>
<script>
import api from "@/api/system/option";
import publicApi from "@/api/public";
import configApi from "@/api/system/config";

export default {
    name: "system-option",
    data() {
        return {
            group_list: [],
            state_list: [],
            reg_group: null,
            reg_state: null,
            reg_switch: 1,
            h5_url: ""

        }
    },
    created() {
        this.listAllGroup();
        this.listAllState();
        this.getRegGroup();
        this.getRegState();
        this.getRegSwitch();
        this.getH5Url();
    },
    methods: {
        async listAllState() {
            let res = await publicApi.listAllState();
            this.state_list = [...res.data];
        },
        async listAllGroup() {
            let res = await publicApi.listAllGroup();
            this.group_list = [...res.data];
        },
        async getRegGroup() {
            let res = await api.getRegGroup();
            let value = res.data.config_value;
            this.reg_group = parseInt(value);
        },
        async getRegState() {
            let res = await api.getRegState();
            let value = res.data.config_value;
            this.reg_state = parseInt(value);
        },
        async getRegSwitch() {
            let res = await api.getRegSwitch();
            let value = res.data.config_value;
            this.reg_switch = parseInt(value);
        },
        async getH5Url() {
            let res = await api.getH5Url();
            let value = res.data.config_value;
            this.h5_url = value;
        },
        async saveOption(type) {
            switch (type) {
                case 1:
                    let sdata1 = {
                        config_key: "REG_GROUP",
                        config_value: this.reg_group.toString()
                    };
                    let res1 = await configApi.edit(sdata1);
                    if (res1.code == 0) {
                        this.$message.success(res1.msg);
                    }
                    break;
                case 2:
                    let sdata2 = {
                        config_key: "REG_STATE",
                        config_value: this.reg_state.toString()
                    };
                    let res2 = await configApi.edit(sdata2);
                    if (res2.code == 0) {
                        this.$message.success(res2.msg);
                    }
                    break;

                case 3:
                    let sdata3 = {
                        config_key: "REG_SWITCH",
                        config_value: this.reg_switch.toString()
                    };
                    let res3 = await configApi.edit(sdata3);
                    if (res3.code == 0) {
                        this.$message.success(res3.msg);
                    }
                    break;

                case 4:
                    let sdata4 = {
                        config_key: "H5_URL",
                        config_value: this.h5_url.toString()
                    };
                    let res4 = await configApi.edit(sdata4);
                    if (res4.code == 0) {
                        this.$message.success(res4.msg);
                    }
                    break;


            }
        }
    }
}
</script>
<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 240px;
    display: inline-block;
    margin-right: 10px;
}
</style>